<template>
  <div class="editInfo">
    <van-nav-bar
      @click-left="$router.back()"
      :title="title"
      right-text="保存"
      @click-right="save"
    >
      <template #left>
        <i class="iconfont icon-sdf" style="fontSize: 18px"></i>
      </template>
    </van-nav-bar>
    <van-field v-model="value" :center="true" class="txt"></van-field>
  </div>
</template>

<script>
import { edit, info } from '@/api/api'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      value: '',
      title: '',
      type: ''
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  // 页面加载根据路由参数判断修改的功能
  created () {
    this.type = this.$route.params.type
    if (this.type === 'position') {
      this.title = '修改职位'
      this.value = this.userInfo.position
    } else if (this.type === 'nickname') {
      this.title = '修改昵称'
      this.value = this.userInfo.nickname
    } else {
      this.title = '修改个性签名'
      this.value = this.userInfo.intro
    }
  },
  methods: {
    // 保存修改
    async save () {
      if (this.type === 'position') {
        await edit({ position: this.value })
        this.userInfo.position = this.value
      } else if (this.type === 'nickname') {
        await edit({ nickname: this.value })
        this.userInfo.nickname = this.value
      } else {
        await edit({ intro: this.value })
        this.userInfo.intro = this.value
      }
      this.$toast.success('修改成功')
      this.$router.back()
      const res = await info()
      this.$store.commit('SETUSERINFO', res.data.data)
    }
  }
}
</script>

<style lang="less" scoped>
.editInfo {
  .txt {
    /deep/.van-cell__value--alone {
      padding: 10px;
      background-color: #f7f4f5;
      border-radius: 10px;
    }
  }
  /deep/.van-nav-bar__text {
    color: #000;
  }
  .edit {
    width: 100%;
    height: 100%;
  }
}
</style>
